<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <title>PHCHAT</title>
</head>

<body>

    <link rel="stylesheet" href="CSS/index.css">
    <script src="../jquery-3.2.1.js"></script>
    <!-- <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script> -->
    <script src="jquery.cookie.js"></script>
    <script type='text/javascript' src='webim.config.js'></script>
    <script type='text/javascript' src='strophe-1.2.8.min.js'></script>
    <script type='text/javascript' src='websdk-1.4.10.js'></script>
    <script src="../vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../styles/iview.css">
    <!-- 引入组件库 -->
    <script src="../iview.min.js"></script>


    <style>
        .input_box {
            margin: 0 50px;
            margin-top: 20px;
        }
    </style>




    <div class="main-div" id="main-div">

        <div class="main">


            <img class="logo" src="images/logo1.png" alt="">
            <div class="login" style="height: 420px">
                <div class="h20"></div>




                <i-input v-model="id" :placeholder="lang._001" style="width: 300px" class="input_box"></i-input>
                <i-input v-model="username" :placeholder="lang._002" style="width: 300px" class="input_box"></i-input>
                <i-input v-model="password" type="password" :placeholder="lang._003" style="width: 300px" class="input_box"></i-input>
                <i-input v-model="configpas" type="password" :placeholder="lang._004" style="width: 300px" class="input_box"></i-input>
                <I-input v-model="phone" style="width:300px;margin:20px 0 0 50px;" :placeholder="lang._005">
                    <span slot="prepend">+63</span>
                </I-input>


                <!-- <i-Button type="primary"  loading></i-Button> -->
                <i-input v-model="code" :placeholder="lang._006" style="width: 229px;float:left;margin-right:0" class="input_box"></i-input>
                <i-Button type="primary" :loading="loading" @click="toLoading()" style="float:left;margin-top:20px;margin-left:10px;width: 60px;
            text-align: center;" number='true'>
                    <span v-if="!loading">{{lang._007}}</span>
                    <span v-else></span>
                </i-Button>
                <!-- <input type="text" class="web-input" placeholder="ID" name="id">
            <input type="text" class="web-input" placeholder="Username" name="username">
            <input type="password" class="web-input" placeholder="Password" name="password">
            <input type="password" class="web-input" placeholder="Confirm password" name="repassword"> -->
                <p class="login-txt-left">
                    <a href="../">{{lang.login}}</a>
                </p>
                <div class="btn-login-div">
                    <button class="btn-login" @click="register()">{{lang.register}}</button>
                </div>
                <!--第三方登錄-->
            </div>

        </div>
    </div>
    <script src="phchat.js"></script>
    <script>
        var a = '<%- JSON.stringify(lang) %>'

        var lang = eval('(' + a + ')');
        var page = new Vue({
            el: '#main-div',
            data: {
                id: '',
                username: '',
                password: '',
                configpas: '',
                phone: '',
                code: '',
                loading: false,
                lang: lang
            },
            methods: {
                test: function() {
                    var t = this;
                    t.instance('regsuccess');
                },
                toLoading: function() {
                    var t = this;




                    if (!t.loading) {
                        if (t.id == "" || t.id.match(/^\w+$/) == null || t.id.length > 16 || t.id.length < 5) {

                            t.instance('iderr');
                            return false;
                        }

                        if (t.phone.length != 10 && t.phone.length != 11) {
                            t.instance('phoneerr');
                            return false;
                        }

                        if (t.password == "" || t.password.match(/^\w+$/) == null || t.password.length > 16 ||
                            t.password.length < 6) {
                            t.instance('passerr');
                            return false;
                        }

                        if (t.usernmae == "" || t.username.match(/^\w+$/) == null || t.username.length > 16 ||
                            t.username.length < 6) {
                            t.instance('usernameerr');
                            return false;

                        }
                        if (t.configpas != t.password) {
                            t.instance('passnolike');
                            return false;
                        }

                        t.loading = true;
                        $.post('./send', {
                            id: this.id,
                            username: this.username,
                            phone: this.phone
                        }, function(result) {
                            if (result == 1) {
                                t.instance('success');
                                t.loading = true;
                                setTimeout(() => {
                                    t.loading = false;
                                }, 60000);
                            } else if (result == 1) {
                                t.instance('error');
                                t.loading = false;
                            } else if (result == 0) {
                                t.instance('admin');
                                t.loading = false;
                            } else if (result == -2) {
                                t.instance('used');
                                t.loading = false;
                            } else if (result == -3) {
                                t.instance('pf');
                                t.loading = false;
                            }
                        })
                    }

                },
                register: function() {
                    var t = this;
                    //先做正则啊密码什么的验证

                    if (t.id == "" || t.id.match(/^\w+$/) == null || t.id.length > 16 || t.id.length < 5) {
                        t.instance('iderr');
                        return false;
                    }

                    if (t.password == "" || t.password.match(/^\w+$/) == null || t.password.length > 16 ||
                        t.password.length < 6) {
                        t.instance('passerr');
                        return false;
                    }

                    if (t.usernmae == "" || t.username.match(/^\w+$/) == null || t.username.length > 16 ||
                        t.username.length < 6) {
                        t.instance('usernameerr');
                        return false;

                    }
                    if (t.configpas != t.password) {
                        t.instance('passnolike');
                        return false;
                    }
                    if (t.phone.length != 10 && t.phone.length != 11) {
                        t.instance('phoneerr');
                        return false;
                    }

                    $.post('./register', {
                        id: this.id,
                        username: this.username,
                        phone: this.phone,
                        password: this.password,
                        code: this.code
                    }, function(result) {
                        console.log(result);
                        if (result == 1) {
                            t.instance('regsuccess');

                        } else if (result == -1) {
                            t.instance('codeerr');
                        } else if (result == 0) {
                            t.instance('nameerr');
                        }
                    });
                },
                instance(type) {
                    var t = this;
                    switch (type) {

                        case 'success':
                            this.$Modal.success({
                                title: t.lang._008,
                                content: t.lang._009,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;

                        case 'error':
                            this.$Modal.error({
                                title: t.lang._016,
                                content: t.lang_025,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;
                        case 'usernameerr':
                            this.$Modal.error({
                                title: t.lang._010,
                                content: t.lang._011,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;
                        case 'iderr':
                            this.$Modal.error({
                                title: t.lang._010,
                                content: t.lang._012,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;
                        case 'passerr':
                            this.$Modal.error({
                                title: t.lang._010,
                                content: t.lang._013,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;
                        case 'phoneerr':
                            this.$Modal.error({
                                title: t.lang._010,
                                content: t.lang._014,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;
                        case 'passnolike':
                            this.$Modal.error({
                                title: t.lang._010,
                                content: t.lang._015,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;
                        case 'admin':
                            this.$Modal.error({
                                title: t.lang._016,
                                content: t.lang._017,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;
                        case 'used':
                            this.$Modal.error({
                                title: t.lang._016,
                                content: t.lang._018,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;
                        case 'pf':
                            this.$Modal.error({
                                title: t.lang._016,
                                content: t.lang._019,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;
                        case 'nameerr':
                            this.$Modal.error({
                                title: t.lang._020,
                                content: t.lang._021,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;
                        case 'codeerr':
                            this.$Modal.error({
                                title: t.lang._020,
                                content: t.lang._022,
                                okText: t.lang.ok,
                                cancelText: t.lang.cancel
                            });
                            break;

                        case 'regsuccess':
                            this.$Modal.success({
                                title: t.lang._023,
                                content: t.lang._024,
                                okText: t.lang.ok,
                                onOk: () => {
                                    window.location.href = "../";

                                }
                            });
                            break;
                    }
                }
            }
        });
    </script>

</body>

</html>